<template>
  <div class="agreementBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="神椰平台用户隐私协议" name="first"></el-tab-pane>
      <el-tab-pane label="神椰平台用户服务协议" name="second"></el-tab-pane>
      <el-tab-pane label="神椰商户隐私协议" name="third"></el-tab-pane>
      <el-tab-pane label="神椰商户服务协议" name="fourth"></el-tab-pane>
      <el-tab-pane label="神椰会员授权协议" name="five"></el-tab-pane>
      <el-tab-pane label="神椰入会须知" name="six"></el-tab-pane>
      <el-tab-pane label="用户注销协议" name="seven"></el-tab-pane>
      <el-tab-pane label="商户注销协议" name="eight"></el-tab-pane>
      <el-tab-pane label="商户资质要求" name="nice"></el-tab-pane>

    </el-tabs>
    <div class="richText">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
        :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="ruleForm.agreement" :defaultConfig="editorConfig"
        :mode="mode" @onCreated="onCreated" @onChange="onChange"/>
    </div>
    <div class="button_box">
      <el-button type="primary" :loading="AgreeLoading" @click="saveData">保存</el-button>
    </div>
  </div>

</template>
<script>
  import {
    addAgreement,
    getAgreement,
  } from "@/api/setting/agreement";
  import '@wangeditor/editor/dist/css/style.css'
  import {
    Editor,
    Toolbar
  } from "@wangeditor/editor-for-vue";
  import {
    getToken
  } from "@/utils/auth";
  export default {
    name: "",
    components: {
      Editor,
      Toolbar
    },
    data() {
      return {
        activeName: 'first',
        ruleForm: {
          agreement: '',//	协议内容
          type: '',//
          id: '',
        },
        AgreeLoading: false,

        // 富文本配置
        logoUploadUrlImg: process.env.VUE_APP_BASE_API + "/common/v1/upload", //图片接口
        videoUploadUrl: process.env.VUE_APP_BASE_API + "/common/v1/upload", //视频接口
        headers: {
          // 'Content-Type':	'application/octet-stream;charset=UTF-8',
          "X-Access-Token": getToken(),
        },
        editor: null,
        html: "<p>hello&nbsp;world</p>",
        toolbarConfig: {
          // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
          // excludeKeys: [ /* 隐藏哪些菜单 */ ],
          excludeKeys:['group-video']
        },
        editorConfig: {

          placeholder: "请输入内容...",
          // autoFocus: false,
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          MENU_CONF: {},
        },
        mode: 'default', // or 'simple'
      };
    },
    computed: {
      
    },
    created() {
      var _this = this
      console.log(111111,this.editorConfigg)
      // 配置上传图片
      var name = ''
      this.editorConfig.MENU_CONF['uploadImage'] = {
        server: _this.logoUploadUrlImg,
        // headers: _this.headers,
        fieldName: 'file',
          //  async customUpload(file, insertFn) {
              
          //   // file 即选中的文件
          //   // 自己实现上传，并得到图片 url alt href
          //   // 最后插入图片
          //   //   insertFn(url, alt, href)
          //   },
        onSuccess(file, res) {
          name = file.name
          console.log(`${file.name} 上传成功`, res)
        },
        customInsert(res, insertFn) {
          console.log(res)
          insertFn( res.result.url, name, res.result.url)
        }
      }
      this.getDetail(2)
       
    },
    mounted(){
      
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
        // console.log('this.editor',this.editor)
      },
      onChange(editor) {
        // console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      },
      getEditorText() {
        const editor = this.editor;
        if (editor == null) return;

        console.log(editor.getText()); // 执行 editor API
      },
      printEditorHtml() {
        const editor = this.editor;
        if (editor == null) return;
  
        console.log(editor.getHtml()); // 执行 editor API
      },
      
      // 判断通知内容是否为空
      checkVal(str) {
        let num = 0,
          reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
        while (num < str.length && str != "") {
          num++;
          let k = str.match(reg);
          if (k) {
            str = str.replace(k[0], "");
          }
        }
        return str == "";
      },
      getDetail(type){
        getAgreement(type).then((res) => {
          this.ruleForm.id = res.result.id
          this.ruleForm.type = res.result.type
          this.$nextTick(()=>{
            if(res.result.agreement == ''){
              this.ruleForm.agreement = '<p></p>'
            }else{
              this.ruleForm.agreement = res.result.agreement
            }
            
          })
        })
        console.log('this.ruleForm',this.ruleForm)
      },
      // 切换tab
      handleClick(tab, event) {
        // （type == 1 神椰平台用户服务协议 2 神椰平台用户隐私协议 3 神椰商户隐私协议 4 神椰商户服务协议 5 神椰会员授权协议 6 神椰入会须知）
        if(tab.index == 0){ //神椰平台用户隐私协议
          this.ruleForm.type = 2
          this.getDetail(2)
        }else if(tab.index == 1){ //神椰平台用户服务协议
          this.ruleForm.type = 1
          this.getDetail(1)
        }else if(tab.index == 2){ //神椰商户隐私协议
          this.ruleForm.type = 3
          this.getDetail(3)
        }else if(tab.index == 3){ //神椰商户服务协议
          this.ruleForm.type = 4
          this.getDetail(4)
        }else if(tab.index == 4){ //神椰会员授权协议
          this.ruleForm.type = 5
          this.getDetail(5)
        }else if(tab.index == 5){ //神椰入会须知
          this.ruleForm.type = 6
          this.getDetail(6)
        }else if(tab.index == 6){ //用户注销协议
          this.ruleForm.type = 7
          this.getDetail(7)
        }else if(tab.index == 7){ //商户注销协议
          this.ruleForm.type = 8
          this.getDetail(8)
        } else if(tab.index == 8){ //商户资质要求
          this.ruleForm.type = 10
          this.getDetail(10)
        }
      },
      // 保存积分配置
      saveData(){
        // console.log('内容',this.checkVal(this.ruleForm.agreement))
        if(this.checkVal(this.ruleForm.agreement)){
            this.$message.error('协议内容不能为空');
            return;
        }
        this.AgreeLoading = true
        var data = {
            ...this.ruleForm
        }
        addAgreement(data).then((res) => {
          console.log('res',res)
          if (res.code == 200) {
            this.$message.success(res.message);
            this.AgreeLoading = false
          }
          // this.AgreeLoading = false
        }).catch(err=>{
          this.AgreeLoading = false
        })

      },
    }
  };

</script>
<style lang="scss" scoped>
  .agreementBox{
    background: #fff;
    padding: 20px;
  }
  .richText {
    border: 1px solid #ccc;
    line-height: normal;
  }
  .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
</style>
